import { computed } from 'vue'
import { Root } from '@dev-crafter/editor-core'
import { type IComponents, isString } from '@dev-crafter/shared'

import { materials } from '@/materials'
console.log('🚀 ~ file: index.ts:6 ~ materials:', materials)

// 本代码后期删掉
export function usePredefinedComponents() {
  const coms = computed(() => {
    const designers: Record<string, { isReact: boolean; component: IComponents }> = {
      Root: {
        isReact: false,
        component: Root,
      },
    }
    const components: Record<string, { isReact: boolean; component: IComponents }> = {
      Root: {
        isReact: false,
        component: Root,
      },
    }
    for (const com of materials) {
      designers[com.componentName] = {
        isReact: com.isReact || false,
        component: com.designer,
      }
      components[com.componentName] = {
        isReact: com.isReact || false,
        component: com.component,
      }
      if (com.slots) {
        for (const key of Object.keys(com.slots)) {
          const slot = com.slots[key]
          if (slot === true || slot === undefined || isString(slot) || designers[slot.componentName])
            continue

          designers[slot.componentName] = {
            isReact: com.isReact || false,
            component: slot.designer as IComponents,
          }
          components[slot.componentName] = {
            isReact: com.isReact || false,
            component: slot.component as IComponents,
          }
        }
      }
    }

    return { designers, components }
  })

  return coms
}
